﻿@using Nop.Core.Domain.Catalog
@model ProductListModel
@{
    var gridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSize;

    //page title
    ViewBag.Title = T("Admin.Catalog.Products.Manage").Text;
}
@using (Html.BeginForm())
{
    <div class="section-header">
        <div class="title">
            <img src="@Url.Content("~/Administration/Content/images/ico-catalog.png")" alt="" />
            @T("Admin.Catalog.Products.Manage")
        </div>
        <div class="options">
            <a href="@Url.Action("Create")" class="k-button">@T("Admin.Common.AddNew")</a>
            <a href="@Url.Action("DownloadCatalogAsPdf")" class="k-button">@T("Admin.Catalog.Products.List.DownloadPDF")</a>
            <a href="@Url.Action("ExportXmlAll")" class="k-button">@T("Admin.Common.ExportToXml.All")</a>
            <input type="button" id="exportxml-selected" class="k-button" value="@T("Admin.Common.ExportToXml.Selected")" />
            <a href="@Url.Action("ExportExcelAll")" class="k-button">@T("Admin.Common.ExportToExcel.All")</a>
            <input type="button" id="exportexcel-selected" class="k-button" value="@T("Admin.Common.ExportToExcel.Selected")" />
            @if (!Model.IsLoggedInAsVendor)
            {
                //a vendor cannot import products
                <input type="button" id="importexcel" name="importexcel" class="k-button" value="@T("Admin.Common.ImportFromExcel")" />
            }
            <input type="button" id="delete-selected" class="k-button" value="@T("Admin.Common.Delete.Selected")" />
        </div>
    </div>
    <table width="100%">
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.SearchProductName):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.SearchProductName)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.SearchCategoryId):
            </td>
            <td class="adminData">
                @Html.DropDownList("SearchCategoryId", Model.AvailableCategories)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.SearchIncludeSubCategories):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.SearchIncludeSubCategories)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.SearchManufacturerId):
            </td>
            <td class="adminData">
                @Html.DropDownList("SearchManufacturerId", Model.AvailableManufacturers)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.SearchStoreId):
            </td>
            <td class="adminData">
                @Html.DropDownList("SearchStoreId", Model.AvailableStores)
            </td>
        </tr>
        <tr @(Model.IsLoggedInAsVendor ? Html.Raw("style='display: none;'") : null)>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.SearchVendorId):
            </td>
            <td class="adminData">
                @Html.DropDownList("SearchVendorId", Model.AvailableVendors)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.SearchWarehouseId):
            </td>
            <td class="adminData">
                @Html.DropDownList("SearchWarehouseId", Model.AvailableWarehouses)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.SearchProductTypeId):
            </td>
            <td class="adminData">
                @Html.DropDownList("SearchProductTypeId", Model.AvailableProductTypes)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.GoDirectlyToSku):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.GoDirectlyToSku)
                <input type="submit" id="go-to-product-by-sku" name="go-to-product-by-sku" class="k-button" value="@T("Admin.Common.Go")" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" id="search-products" class="k-button" value="@T("Admin.Common.Search")" />
            </td>
        </tr>
    </table>
    <p>
    </p>
    <table class="adminContent">
        <tr>
            <td>
                <div id="products-grid"></div>

                <script>
                    $(document).ready(function() {
                        $("#products-grid").kendoGrid({
                            dataSource: {
                                type: "json",
                                transport: {
                                    read: {
                                        url: "@Html.Raw(Url.Action("ProductList", "Product"))",
                                        type: "POST",
                                        dataType: "json",
                                        data: additionalData
                                    }
                                },
                                schema: {
                                    data: "Data",
                                    total: "Total",
                                    errors: "Errors"
                                },
                                error: function(e) {
                                    display_kendoui_grid_error(e);
                                    // Cancel the changes
                                    this.cancelChanges();
                                },
                                pageSize: @(gridPageSize),
                                serverPaging: true,
                                serverFiltering: true,
                                serverSorting: true
                            },
                            pageable: {
                                refresh: true
                            },
                            editable: {
                                confirmation: false,
                                mode: "inline"
                            },
                            scrollable: false,
                            dataBound: onDataBound,
                            columns: [
                                {
                                    field: "Id",
                                    headerTemplate: "<input id='mastercheckbox' type='checkbox'/>",
                                    headerAttributes: { style: "text-align:center" },
                                    attributes: { style: "text-align:center" },
                                    template: "<input type='checkbox' value='#=Id#' class='checkboxGroups'/>",
                                    width: 50
                                },  
                                @if (Model.DisplayProductPictures)
                                {
                                    <text>{
                                field: "PictureThumbnailUrl",
                                title: "@T("Admin.Catalog.Products.Fields.PictureThumbnailUrl")",
                                template: '<img src="#=PictureThumbnailUrl#" />',
                            width: 200
                        },</text>
                                }
                                {
                                    field: "Name",
                                    title: "@T("Admin.Catalog.Products.Fields.Name")",
                                    width: 300
                                }, {
                                    field: "Sku",
                                    title: "@T("Admin.Catalog.Products.Fields.Sku")",
                                    width: 100
                                }, {
                                    field: "Price",
                                    title: "@T("Admin.Catalog.Products.Fields.Price")",
                                    width: 150,
                                    //if not a grouped product, then display
                                    template: "# if(ProductTypeId != @((int)ProductType.GroupedProduct)) {# #:Price# #}  #"
                                }, {
                                    field: "StockQuantity",
                                    title: "@T("Admin.Catalog.Products.Fields.StockQuantity")",
                                    width: 100,
                                    //if not a grouped product
                                    //AND "manage inventory" is "Track inventory"
                                    //then display
                                    template: "# if(ProductTypeId != @((int)ProductType.GroupedProduct) && ManageInventoryMethodId == @((int)ManageInventoryMethod.ManageStock)) {# #:StockQuantity# #}  #"
                                }, {
                                    field: "ProductTypeName",
                                    title: "@T("Admin.Catalog.Products.Fields.ProductType")",
                                    width: 100
                                }, {
                                    field: "Published",
                                    title: "@T("Admin.Catalog.Products.Fields.Published")",
                                    width: 100,
                                    headerAttributes: { style: "text-align:center" },
                                    attributes: { style: "text-align:center" },
                                    template: '<img src="@Url.Content("~/Administration/Content/images/")active-#=Published#.gif" />'
                                }, {
                                    field: "Id",
                                    title: "@T("Admin.Common.Edit")",
                                    width: 100,
                                    template: '<a href="Edit/#=Id#">@T("Admin.Common.Edit")</a>'
                                }
                            ]
                        } );
                    });
                </script>
            </td>
        </tr>
    </table>
    
    <script type="text/javascript">

        var selectedIds = [];

        $(document).ready(function () {

            //search button
            $('#search-products').click(function () {
                //search
                var grid = $('#products-grid').data('kendoGrid');
                grid.dataSource.page(1); //new search. Set page size to 1
                grid.dataSource.read();
                //clear selected checkboxes
                $('.checkboxGroups').attr('checked', false).change();
                selectedIds = [];
                return false;
            });

            $("#@Html.FieldIdFor(model => model.SearchProductName)").keydown(function (event) {
                if (event.keyCode == 13) {
                    $("#search-products").click();
                    return false;
                }
            });
            $("#@Html.FieldIdFor(model => model.GoDirectlyToSku)").keydown(function (event) {
                if (event.keyCode == 13) {
                    $("#go-to-product-by-sku").click();
                    return false;
                }
            });

            //"Export Excel selected" button
            $('#exportexcel-selected').click(function (e) {
                e.preventDefault();
                //redirect to required URL
                setLocation('@(Url.Action("ExportExcelSelected", "Product"))?selectedIds=' + selectedIds.join(","));
                return false;
            });

            //"Export XML selected" button
            $('#exportxml-selected').click(function (e) {
                e.preventDefault();
                //redirect to required URL
                setLocation('@(Url.Action("ExportXmlSelected", "Product"))?selectedIds=' + selectedIds.join(","));
                return false;
            });

            $('#mastercheckbox').click(function () {
                $('.checkboxGroups').attr('checked', $(this).is(':checked')).change();
            });

            //"Delete (selected)" button
            $('#delete-selected').click(function (e) {
                e.preventDefault();
                //redirect to required URL
                setLocation('@(Url.Action("DeleteSelected", "Product"))?selectedIds=' + selectedIds.join(","));
                return false;
            });

            //wire up checkboxes. 
            $('#products-grid').on('change', 'input[type=checkbox][id!=mastercheckbox]', function (e) {
                var $check = $(this);
                if ($check.is(":checked") == true) {
                    var checked = jQuery.inArray($check.val(), selectedIds);
                    if (checked == -1) {
                        //add id to selectedIds.  
                        selectedIds.push($check.val());
                    }
                }
                else {
                    var checked = jQuery.inArray($check.val(), selectedIds);
                    if (checked > -1) {
                        //remove id from selectedIds.  
                        selectedIds = $.grep(selectedIds, function (item, index) {
                            return item != $check.val();
                        });
                    }
                }
                updateMasterCheckbox();
            });
        });

        function additionalData() {
            return {
                SearchProductName: $('#@Html.FieldIdFor(model => model.SearchProductName)').val(),
                SearchCategoryId: $('#SearchCategoryId').val(),
                SearchIncludeSubCategories: $('#@Html.FieldIdFor(model => model.SearchIncludeSubCategories)').is(':checked'),
                SearchManufacturerId: $('#SearchManufacturerId').val(),
                SearchStoreId: $('#SearchStoreId').val(),
                SearchWarehouseId: $('#SearchWarehouseId').val(),
                SearchVendorId: $('#SearchVendorId').val(),
                SearchProductTypeId: $('#SearchProductTypeId').val()
            };
        }

        function onDataBound(e) {
            $('#products-grid input[type=checkbox][id!=mastercheckbox]').each(function () {
                var currentId = $(this).val();
                var checked = jQuery.inArray(currentId, selectedIds);
                //set checked based on if current checkbox's value is in selectedIds.  
                $(this).attr('checked', checked > -1);
            });

            updateMasterCheckbox();
        }

        function updateMasterCheckbox() {
            var numChkBoxes = $('#products-grid input[type=checkbox][id!=mastercheckbox]').length;
            var numChkBoxesChecked = $('#products-grid input[type=checkbox][checked][id!=mastercheckbox]').length;
            $('#mastercheckbox').attr('checked', numChkBoxes == numChkBoxesChecked && numChkBoxes > 0);
        }
    </script>  
}


@*import products form*@
<div id="importexcel-window" style="display:none;">
    @using (Html.BeginForm("ImportExcel", "Product", FormMethod.Post, new {enctype = "multipart/form-data"}))
    {
        <table style="text-align:left;">
            <tr>
                <td colspan="2">
                    <em>@T("Admin.Catalog.Products.List.ImportFromExcelTip")</em>
                </td>
            </tr>
            <tr>
                <td>
                    @T("Admin.Common.ExcelFile"):
                </td>
                <td>
                    <input type="file" id="importexcelfile" name="importexcelfile" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" class="k-button" value="@T("Admin.Common.ImportFromExcel")" />
                </td>
            </tr>
        </table>
    }
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#importexcel").click(function (e) {
            e.preventDefault();
            var window = $("#importexcel-window");
            if (!window.data("kendoWindow")) {
                window.kendoWindow({
                    modal: true,
                    width: "400px",
                    title: "@T("Admin.Common.ImportFromCsv")",
                    actions: ["Close"]
                });
            }
            window.data('kendoWindow').center().open();
        });
    });
</script>